import { state } from '../public/data'

/**
 * @Description 设置波点颜色
 * @date 2021-03-09
 * @returns {any}
 */
export function Circle(emit: any): void {
    // 创建之前先清除地图上的覆盖物
    state.map.clearOverlays()

    const colors = ['rgb(250,56,71)', 'rgb(243,152,0)', 'rgb(0,205,0)']
    const data = state.points.map(
        (point: any) => {
            return {
                geometry: {
                    type: 'Point',
                    coordinates: [point.geometry.coordinates[0], point.geometry.coordinates[1]]
                },
                type: point.type,
                title: `title`,
                text: `${point.interName}${point.type}`,
                color: colors[+point.type],
                // 圆的半径
                size: 8,
            }
        }
    )

    // 绘制水波纹点
    const bubbleLayer = new mapvgl.CircleLayer({
        // 绘制带泡泡的圆
        type: 'bubble',
        // 扩散半径，支持直接设置和回调两种形式，size为点的大小
        radius(size: number) {
            return 3 * size
        },
        // 扩散时间
        duration: 5,
        // 渐隐时间
        trail: 0.5,
    })

    state.view.addLayer(bubbleLayer)
    bubbleLayer.setData(data)

    // 点击标记点
    const simpleLayer = new mapvgl.CircleLayer({
        // 默认类型，绘制简单圆,
        type: 'simple',
        enablePicked: true,
        //   selectedColor: '#f00', // 选中项颜色
        //   autoSelect: true, // 根据鼠标位置来自动设置选中项
        onClick: (e: any, opt: any) => {
            // 点击事件
            console.log('点击事件', e, opt)

            // 巡检页面用于显示路口窗体
            emit('inspection', e)

            // 判断是否点击到标记点之外
            if (e.dataItem) infoPopup(e, opt, emit)
        },
    })
    state.view.addLayer(simpleLayer)
    simpleLayer.setData(data)
}

/**
 * @Description 向地图中添加信息窗口
 * @date 2021-03-09
 * @param {any} e:{dataItem:{title:string;text:string}}
 * @param {any} opt:any
 * @returns {any}
 */
export function infoPopup(e: any, opt: any, emit: (arg0: string, arg1: any) => void): void {
    const content = `<div class="info-window-content"><span>${e.dataItem.text}</span><span id="markerbtn" class="detail">确定</span></div>`
    const infoWindow = new BMapGL.InfoWindow(content) // 创建信息窗口对象
    // 防抖解决点击信息窗多次弹出问题
    setTimeout(() => {
        state.map.openInfoWindow(infoWindow, opt.latlng) // 打开信息窗口
    }, 20);

    //判断窗口的打开状态
    if (!infoWindow.isOpen()) {
        //如果没有打开，则监听打开事件，获取按钮，添加事件
        infoWindow.addEventListener("open", () => {
            document.getElementById("markerbtn").ontouchstart = () => {
                console.log('没有打开', e);

                // 路口正常下显示详情，有故障情况下显示告警列表
                if (e.dataItem.type === '0') {
                    emit('showAlarm', e.dataItem)
                } else if (e.dataItem.type === '1') {
                    emit('warnShow', e.dataItem)
                } else {
                    emit('interDetail', e.dataItem)
                }
            }
        })
    } else {
        //如果已经打开，直接获取按钮，添加事件
        document.getElementById("markerbtn").ontouchstart = () => {
            console.log('已经打开', e);
            // 路口正常下显示详情，有故障情况下显示告警列表
            if (e.dataItem.type === '0') {
                emit('showAlarm', e.dataItem)
            } else if (e.dataItem.type === '1') {
                emit('warnShow', e.dataItem)
            } else {
                emit('interDetail', e.dataItem)
            }
        }
    }
}